<template>
  <div class="ConditionFilter">
    <div class="line" v-if="config.length > 1">
      <div class="line_cell"></div>
      <el-select class="line_select" v-model="filterValue" filterable clearable placeholder="" size="small">
        <el-option v-for="item in filterOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </div>
    <div class="filter_box">
      <div v-for="(item, index) in config" :key="index">
        <div :class="['getMethod_filter', index === config.length - 1 ? 'getMethod_filter_last' : '']" v-if="item.children.length === 0">
          <el-select v-model="value" filterable clearable placeholder="请选择" size="small">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-select v-model="value" filterable clearable placeholder="请选择" size="small">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-select v-model="value" filterable clearable placeholder="请选择" size="small">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-input size="small" placeholder="请输入内容"></el-input>
          <i class="el-icon-delete" @click="deleteNode(index)"></i>
          <el-popover popper-class="ConditionFilter_Popover" placement="left" width="90" trigger="hover">
            <div class="popover_btn" @click="addNode(1, index)">同层级条件</div>
            <div class="popover_btn" @click="addNode(2, index)">子集条件</div>
            <i class="el-icon-plus" slot="reference"></i>
          </el-popover>
        </div>
        <ConditionFilter v-if="item.children.length > 0" :config.sync="item.children" :index_UpLevel="index" @deleteNode_UpLevel="deleteNode_UpLevel" />
      </div>
    </div>
  </div>
</template>

<script>
import { nanoid } from 'nanoid'

export default {
  name: 'ConditionFilter',
  props: {
    config: {
      required: true,
      type: Array,
      default: () => { return [] }
    },
    index_UpLevel: {
      required: false,
      type: Number,
      default: -1
    }
  },
  data () {
    return {
      options: [
        { value: 1, label: '办公地址' },
        { value: 2, label: '信息录入' },
        { value: 3, label: '社保公积金分类' },
        { value: 4, label: '证明数据集' },
        { value: 5, label: '收入证明数据集' },
        { value: 6, label: '学历数据集' }
      ],
      filterOptions: [
        { value: 1, label: '且' },
        { value: 2, label: '或' }
      ],
      value: null,
      filterValue: 1
    }
  },
  methods: {
    deleteNode (index) {
      // index_UpLevel === -1 代表是最外层组件，已没有父级组件
      // index_UpLevel !== -1 代表其组件有组件嵌套，删除节点时需要考虑是否通知父级节点
      if (this.index_UpLevel === -1) {
        if (this.config.length <= 1) {
          this.$message({ message: '最后一个条件不可以删除', type: 'warning' })
        } else {
          this.config.splice(index, 1)
        }
      } else {
        if (this.config.length <= 2) {
          this.$emit('deleteNode_UpLevel', this.index_UpLevel)
        } else {
          this.config.splice(index, 1)
        }
      }
    },
    deleteNode_UpLevel (index) {
      // 父级组件接收到子级组件删除节点的操作消息
      this.config[index] = this.config[index].children[0]
      this.$forceUpdate()
    },
    addNode (num, index) {
      // 新增同级条件
      if (num === 1) {
        this.config.splice(index + 1, 0, { name: nanoid(), children: [] })
      }
      // 新增子级条件
      if (num === 2) {
        const name = this.config[index].name
        this.config[index].children.push({ name, children: [] }, { name: nanoid(), children: [] })
      }
    }
  }
}
</script>

<style scoped>
.ConditionFilter{
  padding: 8px 0;
  display: flex;
  overflow-x: auto;
}
.line{
  position: relative;
  width: 70px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.line_cell{
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 60%;
  width: 16px;
  border: 1px solid #A5AFBC;
  border-width: 1px 0 1px 1px;
  border-radius: 4px;
}
.line::before{
  z-index: 1;
  content: "";
  position: absolute;
  top: 6px;
  right: 10px;
  width: 4px;
  height: 4px;
  border: 1px solid #A5AFBC;
  border-radius: 50%;
  background-color: #FFF;
}
.line::after{
  z-index: 1;
  content: "";
  position: absolute;
  bottom: 6px;
  right: 10px;
  width: 4px;
  height: 4px;
  border: 1px solid #A5AFBC;
  border-radius: 50%;
  background-color: #FFF;
}
.line_select{
  width: 60px !important;
}
.getMethod_filter{
  margin-bottom: 8px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.getMethod_filter_last{
  margin-bottom: 0;
}
.el-select, .el-input{
  width: 120px;
  margin-right: 8px;
  flex-shrink: 0;
}
i{
  margin-right: 8px;
  font-size: 18px;
  font-weight: bold;
  color: #999;
  cursor: pointer;
}
.el-icon-plus{
  margin-right: 0;
}
.popover_btn{
  color: #0089FF;
  cursor: pointer;
}
.popover_btn:hover{
  font-weight: bold;
}

.ConditionFilter >>> .el-input__inner{
  padding-left: 6px;
  padding-right: 24px;
}
.ConditionFilter >>> .el-input__icon{
  width: 16px;
}
</style>
